﻿"use client";
import { Menu } from "antd";
import Link from "next/link";
import { usePathname } from "next/navigation";
import React, {useEffect ,useState} from "react";

export default function AppSideMenu(){
  const pathname = usePathname()
  const [selectedKey,setSelectedKey] = useState([""])

useEffect( () =>{
  if(pathname.startsWith("/bookmarks")){
    setSelectedKey(["2"])
  }else if(pathname.startsWith("/courses")){
    setSelectedKey(["3"])
  }else if(pathname.startsWith("/studentManage")){
    setSelectedKey(["4"])
  }else if(pathname.startsWith("/best-practices")){
    setSelectedKey(["5"]) 
  }else if(pathname.startsWith("/certifications")){
    setSelectedKey(["6"])
  }else if(pathname.startsWith("/blog")){
    setSelectedKey(["7"])
  }else if(pathname.startsWith("/userManage")){
    setSelectedKey(["8"])
  }else if(pathname.startsWith("/login")){
    setSelectedKey(["9"])
  }else if(pathname.startsWith("/userlogin")){
    setSelectedKey(["10"])
  }else if(pathname.startsWith("/userregister")){
    setSelectedKey(["11"])
  }else if(pathname === "/"){
    setSelectedKey(["1"])
  }
},[pathname])

  const menuItems = [
    {label:<Link href="/">首页</Link>,key:1},
    {label:<Link href="/bookmarks">Bookmarks</Link>,key:2},
    {type:"divider"},
    {label:<Link href="/courses">博客列表</Link>,key:3},
    {label:<Link href="/studentManage">学生管理</Link>,key:4},
    {label:<Link href="/best-practices">Best Practices</Link>,key:5},
    {label:<Link href="/certifications">Certifications</Link>,key:6},
    {type:"divider"},
    {label:<Link href="/blog">个人博客</Link>,key:7},
    {label:<Link href="/userManage">个人信息</Link>,key:8},
    {label:<Link href="/login">login</Link>,key:9},
    {label:<Link href="/userlogin">登入</Link>,key:10},
    {label:<Link href="/userregister">注册</Link>,key:10},
  ];  
  return <Menu mode="inline" items={menuItems} selectedKeys={selectedKey}></Menu>
}
